<template lang="pug">
  div(v-if="getWorksList && isShow")
    transition(:duration="900", :enter-active-class="getAnimation[0]", :leave-active-class="getAnimation[1]")
      .works-toolsbar.animated
        .mask(@click="hideWorks")
        .works-wrap
          .close(@click="hideWorks")
            i.iconfont.icon-close
          .works-top.pos-r
            h2.title.tac 作品列表
          .works-body
            Scroll.works-menu
              ul
                li.works-menu-item(
                  v-for="(item, index) in getWorksList",
                  :key="index",
                  :class="{'current': curWorkIndex == index}"
                  @click="handleWorkGroup(index, $event)")
                  span.text
                    | {{item.name}}
            Scroll.works-scene(ref="sceneWrap")
              ul.clearfix
                li.works-scene-list(
                  ref="sceneItem")
                  h2.title {{getWorksList[curWorkIndex].name}}
                  ul
                    li.works-scene-item(
                      v-for="(c, i) in getWorksList[curWorkIndex].child", @click="handleClick($event, c.panoview_url)")
                      //- a(:href="c.panoview_url")
                      span
                        .icon
                          img(:src='c.icon_src', alt='')
                        .name.omit {{c.pano_name}}
</template>

<script>
import Scroll from 'Comps/Scroll'
import { mapGetters } from 'vuex'
export default {
  name: 'worksModal',
  data() {
    return {
      isShow: false,
      listHeight: [],
      scrollY: 0,
      template: '',
      curWorkIndex: 0,
      hasTap: true
    }
  },
  mounted() {
    this.$vgo.on('works:show', () => {
      this.isShow = true
      console.log(999);

    })
  },
  computed: {
    ...mapGetters(['worksData', 'themeId']),
    getWorksList() {
      if(this.worksData) {
        return this.worksData
      }
    },
    getAnimation() {
      if (this.themeId == 4) {
        return ['bounceInUp', 'bounceOutDown']
      }else {
        return ['bounceInLeft', 'bounceOutLeft']
      }
    }
  },
  methods: {
    handleClick(e, url) {
      let id = url.split('/panoview/')[1]
      url = '/panoview/' + id

      this.$router.replace(url)
      // this.$router.go(0)
      setTimeout(() => {
        window.location.reload()
      }, 100)
      this.hideWorks()
    },
    hideWorks() {
      this.isShow = false
    },
    handleWorkGroup(index, event) {
      // 如果是原生的事件阻止掉
      if(!event._constructed){
        return
      }
      this.curWorkIndex = index
    },
    handleChangePano(link) {
      this.redirect(link)
    },
    redirect (url, asLink = true) {
      asLink ? (window.location.href = url) : window.location.replace(url)
    }
  },
  beforeDestroy() {
    console.log('leave')
  },
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'
.theme-app-a, .theme-app-b, .theme-app-c, .theme-app-d, .theme-app-g
  .works-toolsbar
    full-cover()
    z-index: 101
    .mask
      full-cover()
      background-color: rgba($black, .6)
    .works-wrap
      position: absolute
      top: 0
      bottom: 0
      width: 250px
      background-color: #fff
      .close
        position: absolute
        right: 10px
        top: 5px
        z-index: 100
        i
          font-size: 24px
          color: $danger
      .works-top
        height: 40px
        line-height: 40px
        bdb-1px(#ddd)
        .title
          margin: 0
          position: relative
          font-size: 18px
          color: $black-light
      .works-body
        display: flex
        position: absolute
        top: 40px
        bottom: 0
        overflow: hidden
        .works-menu
          flex: 0 0 80px
          width: 80px
          border-right: 1px solid #f9f9f9
          background-color: #f3f5f7
          box-sizing: border-box

          .works-menu-item
            display: table
            width: 56px
            height: 54px
            padding: 0 12px
            line-height: 14px
            color: $black-light
            text-align: center
            &.current
              position: relative
              margin-top: -1px
              z-index: 10
              border-left: 3px solid #f3f5f7
              background: #fff
              .text
                font-weight: 700
                color: #333
            .text
              display: table-cell
              vertical-align: middle
              font-size: 12px
              line-height: 14px
        .works-scene
          ul
            min-height: 100%
          .works-scene-list
            flex: 1
            .title
              height: 40px
              line-height: 40px
              font-size: 14px
              padding: 0 10px
              border-bottom: 1px solid #f3f5f7
              font-weight: 500
              color: $black-light
              text-align: center
            .works-scene-item
              display: flex
              margin: 10px
              clear: both
              bd-1px(rgba(7, 17, 27, .1), 6px)
              &:last-child
                margin-bottom: 0
              .icon
                width: 150px
                height: 100px
                border-radius: 6px
                overflow: hidden
                img
                  width: 100%
                  height: 100%
              .name
                position absolute
                bottom: 0
                left: 0
                right: 0
                font-size: 12px
                padding: 5px
                color: $white
                border-radius: 0 0 6px 6px
                background-color: rgba($black, .3)

.theme-app-e
  .works-toolsbar
    width 100vw
    height 60vh
    position fixed
    left 0
    bottom 0
    z-index: 101
    .mask
      width 100vw
      height 60vh
      background-color: rgba($black, .6)
    .works-wrap
      position: absolute
      top: 0
      bottom: 0
      height 60vh
      width: 100vw
      // background-color: #fff
      .close
        position: absolute
        right: 10px
        top: 5px
        z-index: 100
        i
          font-size: 24px
          color: $danger
      .works-top
        height: 40px
        line-height: 40px
        .title
          margin: 0
          position: relative
          font-size: 18px
          color: $white
      .works-body
        width calc(100vw - 20px)
        margin 0 10px 10px 10px
        border-radius 10px
        display: flex
        position: absolute
        top: 40px
        bottom: 0
        overflow: hidden
        .works-menu
          flex: 0 0 80px
          width: 80px
          border-right: 1px solid #f9f9f9
          box-sizing: border-box
          background-color rgba(255, 255, 255, 0.9)
          .works-menu-item
            display: table
            width: 56px
            height: 54px
            padding: 0 12px
            line-height: 14px
            color: $black-light
            text-align: center
            &.current
              position: relative
              margin-top: -1px
              z-index: 10
              background: #fff
              .text
                font-weight: 700
                color: #333
            .text
              display: table-cell
              vertical-align: middle
              font-size: 12px
              line-height: 14px
        .works-scene
          width calc(100vw - 100px)
          background-color rgba(255, 255, 255, 0.8)
          ul
            min-height: 100%
            width 100%
          .works-scene-list
            flex: 1
            .title
              height: 40px
              line-height: 40px
              font-size: 14px
              padding: 0 10px
              margin-bottom 10px
              border-bottom: 1px solid #f3f5f7
              font-weight: 500
              color: $black-light
              text-align: center
            ul
              display flex
              flex-wrap wrap
              .works-scene-item
                flex 0 0 47%
                display: flex
                clear: both
                display inline-block
                bd-1px(rgba(7, 17, 27, .1), 6px)
                margin-bottom 10px
                &:nth-child(2n+1)
                  margin-right 2%
                  margin-left 2%
                .icon
                  width: 100%
                  height: 100px
                  border-radius: 6px
                  overflow: hidden
                  img
                    width: 100%
                    height: 100%
                .name
                  position absolute
                  bottom: 0
                  left: 0
                  right: 0
                  font-size: 12px
                  padding: 5px
                  color: $white
                  border-radius: 0 0 6px 6px
                  background-color: rgba($black, .3)
</style>
